<style disabled>
    .Ellipsis {
        max-width:    48em;
    }
    td {
        white-space:    nowrap;
    }
    td a:link {
        text-decoration:    none;
    }
    .img-thumbnail {
        max-width:    3em;
    }
</style>
<script>
    require(['jquery', 'EasyWebApp'],  function ($, EWA) {

        EWA.component(function (_data_) {

            _data_.getURL = function () {

                if ( this.user )
                    return  'users/' + this.user + '/issues';

                if ( this.repository )
                    return  'repos/' + this.repository + '/issues';

                return 'issues';
            };

            _data_.fixData = function (event, data) {

                return  $.map(data,  function (_This_) {

                    return  _data_.PR ?
                        (_This_.pull_request && _This_)  :
                        (_This_.pull_request ? null : _This_);
                });
            };
        });
    });
</script>

<div data-href="../../../component/Data_Table.html"
     data-rows="30" data-page="1" data-state="all">

    <span slot="toolbar">
        筛选：
        <select name="state">
            <option value="all">全部</option>
            <option value="open">打开</option>
            <option value="closed">关闭</option>
        </select>
    </span>

    <table slot="table" class="table table-striped table-hover">
        <thead><tr>
            <th>编号</th>
            <th>标题</th>
            <th>创建</th>
            <th>更新</th>
            <th>关闭</th>
            <th>指派</th>
            <th>评论</th>
            <th>计划</th>
        </tr></thead>
        <tbody data-href="?data=${scope.getURL()}?pre_page=${view.rows}&page=${view.page}&state=${view.state}"
               ondata="${scope.fixData}">
            <tr>
                <td>${view.number}</td>

                <td class="Ellipsis" title="${view.title}">

                    <span is="ListView" data-name="labels">

                        <i class="label" style="background: #${view.color}">
                            ${view.name}
                        </i>
                    </span>
                    <a href="detail.html?data=${view.url}">
                        ${view.title}
                    </a>
                </td>
                <td>
                    <a href="../../User/detail.html?data=${view.user.url}"
                       title="${view.user.login}">

                        <img class="img-thumbnail" src="${view.user.avatar_url}" />
                    </a>
                    <abbr title="${(new Date( view.created_at )).toLocaleString()}">

                        ${view.createdTime}
                    </abbr>
                </td>
                <td title="${(new Date( view.updated_at )).toLocaleString()}">
                    ${view.updatedTime}
                </td>
                <td title="${(new Date( view.closed_at )).toLocaleString()}">
                    ${view.closedTime}
                </td>
                <td is="ListView" data-name="assignees">
                    <a href="../../User/detail.html?data=${view.url}"
                       title="${view.login}">

                        <img class="img-thumbnail" src="${view.avatar_url}" />
                    </a>
                </td>
                <td>${view.comments}</td>
                <td>${view.milestone.title}</td>
            </tr>
        </tbody>
    </table>
</div>
